<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性（十个属性）</title>
		<!-- 文本格式化属性（4种方式，10个属性） 
		1.  控制字体   ：font-family
		                font-size
				        font-weight
		2. 控制文本布局【对齐，间隙】：text-algin（控制左右）
		                            line-height
									line-spacing
									word-spacing
		3. 文本修饰效果： text-decoration（只针对于超链接）
		                 text-shadow
		4. 处理文本效果：white-space
		-->
		<style>
			/* 知识点1：CSS语法：选择器{
				          属性：属性值；
						  属性：属性值；
			            }
						  叫法：一个样式
						  id选择器语法：html元素加 id=别名
						  css中加入#别名选中
						  提醒：加权
			 */
			div#d1{
				color: aliceblue;
				/* 知识点2：文本格式化属性--》1.针对控制字体
				 font-family：微软雅黑；
				 */
				font-family: 微软雅黑,华文彩云,sans-serif;
				/* 文本格式化属性--》2.针对控制字体
				 font-size字体尺寸：px/em；
				 px---P C 端---像素，特点：绝对值
				 em---移动端---特点：相对于父元素字体大小，倍数
				 */
				font-size: 10em;
				/* 文本格式化属性-->3.针对控制字体
				 font-weight字体  ：100.200.300~~900
				 */
				font-weight: 100;
			}
			div#d2{
				color: aqua;
				font-family: ;
			}
			
			div h1.c1{
				/* 知识点4：文本格式化属性--针对控制文本格式 */
				text-align: right;
				/* 两端对齐：字体空间长，使用位置：弹性布局 */
				color: #eeecee;
			}
			
			/* 派生选择器【后代选择器】 */
			div span{
				
				a{
					
					p{
						border: 1px solid red;
						/* 知识点10：white-space换行属性
						 属性值不同效果不同
						 nowrap 效果：不换行，作用：在一行显示，不超出范围
						        使用特点：溢出
						 pre    效果：保留空格和回车
						 normal 默认
						 */
						white-space: nowrap; /* 不换行，就一行 */
						overflow: hidden;    /* 其他行省略 */
						wh ite-space: pre;   /* 保存原始文本空格和回车 */
						white-space: normal; /* 默认，空格合并，自动换行 */
					}
					/* 知识点8：文本修饰效果，针对超链接
					 使用方法：与通配选择器一起使用
					 none：去掉超链接下划线
					 underline：默认，下划线，切换
					 line-throgh：删除线，被html5中s元素取代
					 */
					text-decoration: line-through;
					/* 知识点9：文本修饰效果，针对超链接和文本
					   text-shadow 文本阴影属性
					   属性值：X值 Y值 blur模糊距离 颜色；
					 */
					text-shadow: 5px 5px #f00;
				}
				border: 1px solid red;
				height: auto;
				/* 行转块 */
			    display: block;
				/* 知识点5：文本格式化属性 --文本对齐方式-垂直
				line-height：行高属性
				使用方式：一定跟高度一起出现【垂直】
				*/
			   line-height: 60px;
			   /* 知识点6：文本格式化属性--文本间隙【字符】 */
			   letter-spacing: 3px;
			   /* 知识点7：文本格式化属性--文本间隙【单词】 */
			   word-spacing: 10px;
			   /* 补充：1.所有的单词大写 
			   2.所有单词首字符大写 
			   3.首行缩进200px */
			   text-transform: uppercase;
			   text-transform: capitalize;
               text-indent: 200px;
			   
			}
		</style>
	</head>
	<body>
	<h1>处理文本效果[换行和溢出]</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
	Animi consequatur veritatis inventore excepturi, commodi, 
	repudiandae corrupti tempore ipsa sed, 
	magnam modi quasi vitae minima voluptatem doloribus quod voluptatibus facilis officia.
	 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
	 Laboriosam nesciunt illum ut aliquam quia, voluptas repudiandae repellat autem error optio 
	 fugit impedit iste doloribus ullam eaque? Eos dolores maiores sit!</p>
	
	
	
	
	
		<p id="d1">Lorem Minus, neque vel! illum aliquam ratione deleniti laboriosam, praesentium necessitatibus atque ipsum tenetur.</p>
	    <!-- 需求：外层div  内层h1，别俩别名，css任意别名字体设置颜色
		     要求：加权方式 
		 -->
		<div>
			<h1 class="c1 c2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aut placeat ex a quod magni ullam rem consequuntur, possimus vero. Enim velit distinctio praesentium et suscipit ipsum ab culpa facere.</h1>
		</div>
		<h1>
			<marquee>控制文本布局【对其，间隙】</marquee>
		</h1>
		<!-- 需求： 创建div，内嵌span元素，增加假文
		           设置样式：  添加1个像素实线边框，高度：25px
				              派生选择器找到span元素
		   -->
		<div><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel cumque maiores dolores aperiam eos, deleniti voluptates praesentium commodi ratione harum sunt facilis, accusamus pariatur, nam illo voluptate voluptatem non quisquam.</span></div>
	<!-- 需求：创建a元素，超链接跳转到唐工官网 -->
	<div style="height: 200px"></div>
	<h1>文本修饰效果</h1>
	<a href="http://www.tsgzy.edu.cn">跳转到唐工官网</a>
	</body>
</html>